<template>
  <div class="search">
    <SearchIndex class="fixed-top" :showLeft="false" :width="'2.5rem'" @change="searchChange" :kw="kw">
      <template v-slot:left>
        <van-icon
          class="left"
          name="arrow-left"
          @click="sloveGo"
        />
      </template>
      <template v-slot:right>
        <div class="btn" @click.stop="searchKw">搜索</div>
      </template>
    </SearchIndex>
    <transition name="componentAllTabL">
      <section v-show="showContent" class="content" title="搜索内容">
        <section class="history" title="历史记录" v-show="history.length">
          <div class="first">
            <div class="title">历史搜索</div>
            <van-icon class="icon" name="delete-o" @click="clearHistory" />
          </div>
          <div class="second" @click.stop="searchTag">
            <div
              class="history-item"
              v-for="(text, index) in history"
              :key="index"
            >
              {{ text }}
            </div>
          </div>
        </section>
        <section class="history" title="热门搜索">
          <div class="first">
            <div class="title">热门搜索</div>
          </div>
          <div class="second" @click.stop="searchTag">
            <div
              class="history-item"
              :class="{ hot: index < 3 }"
              v-for="(tag, index) in hotSearch?.suggests"
              :key="index"
            >
              {{ tag.name }}
            </div>
          </div>
        </section>
        <section class="history" title="热门搜索" v-if="hotSearch">
          <div class="first">
            <div class="title">猫乐榜单</div>
            <div class="btn-right">查看全部</div>
          </div>
          <div class="items">
            <div
              class="item"
              v-for="(item, index) in hotSearch.recipes_ranking.slice(0, 3)"
              :key="index"
              @click.stop="toFoodDetail(item)"
            >
              <div class="img-box">
                <img :src="item.image_url" alt="" />
                <div class="item-tag">{{ item.top_text }}</div>
              </div>
              <div class="my-text title">{{ item.title }}</div>
            </div>
          </div>
        </section>
      </section>
    </transition>
    <transition name="componentAllTabR">
      <section v-show="!showContent">
        <SearchDetail :kw="kw"/>
      </section>
    </transition>
  </div>
</template>

<script>
import SearchIndex from "@/components/search/SearchIndex.vue";
import SearchDetail from "@/components/search/SearchDetail.vue";
export default {
  components: {
    SearchIndex,
    SearchDetail
  },
  data: () => {
    return {
      showContent:true,
      history: [],
      hotSearch: null,
      kw: "",
    };
  },
  methods: {
    toFoodDetail(item){
      console.log(item);
      let id = item.action_url.match(/id=\d+/g)[0].split(/=/g)[1];
      this.$router.push({
        name: "fooddetail",
        params: {
          foodid: Number.parseInt(id),
        },
      });
    },
    //处理头部返回逻辑
    sloveGo(){
      if(this.showContent == true)this.$emit('changeCallSearch');
      else this.showContent = true;
    },
    getLocalStorage() {
      this.history = JSON.parse(localStorage.getItem("history")) || [];
    },
    setLocalStorage() {
      localStorage.setItem("history", JSON.stringify(this.history));
    },
    //清空历史搜索
    clearHistory() {
      localStorage.setItem("history", JSON.stringify([]));
      this.getLocalStorage();
      this.$toast.success("清除成功");
    },
    //获取热门搜索
    getHotSearch() {
      this.axios
        .post(
          `${this.api.baseUrlV2}/recipe/suggests`,
          {},
          {
            headers: {
              version: this.api.version,
            },
          }
        )
        .then((res) => {
          this.hotSearch = res.data.result;
        });
    },
    //获取组件搜索关键字
    searchChange(search) {
      this.kw = search;
    },
    //搜索关键字,跳转路由步骤，设置历史记录
    searchKw() {
      this.kw = this.kw.trim();
      if (!this.kw) {
        this.$toast.fail("关键字为空");
        return;
      }
      this.getLocalStorage();
      this.history = [
        this.kw,
        ...this.history.filter((value) => value != this.kw),
      ];
      this.setLocalStorage();
      this.showContent = false;
    },
    //点击历史记录tag时调用
    searchTag(e) {
      if (!/history-item/gi.test(e.target.classList.toString())) return;
      this.kw = e.target.textContent;
      this.searchKw();
    },
  },
  created() {
    this.getLocalStorage();
    this.getHotSearch();
  },
};
</script>

<style lang="scss" scoped>
.search {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  background-color: var(--bgc-white);
  overflow: scroll;
  padding-top: 0.55rem;
  &::-webkit-scrollbar{
    display: none;
  }
  .fixed-top{
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--bgc-white);
    z-index: 200;
  }
  .left {
    width: 0.5rem;
    font-size: 0.25rem;
    margin-right: -0.05rem;
    margin-left: 0;
    color: var(--text-black);
    &::after {
      display: none;
    }
  }
  .btn {
    width: 0.5rem !important;
    height: 100% !important;
    line-height: 55px;
    margin-left: 0 !important;
    text-align: center;
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0.2rem 0.5rem 0.2rem;
    .history {
      position: relative;
      margin-bottom: 0.2rem;
      color: var(--text-black);
      &::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: var(--bgc-white);
        animation: catShow .3s linear forwards;
        @keyframes catShow {
          0%{
            height: 100%;
          }100%{
            height: 0;
          }
        }
      }
      .first {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        .title {
          font-size: 0.16rem;
          font-weight: bold;
        }
        .icon {
          font-size: 0.2rem;
          color: var(--text-gray);
        }
        .btn-right {
          color: var(--text-green);
        }
      }
      .second {
        display: flex;
        flex-wrap: wrap;
        margin: 0.1rem 0;
        .history-item {
          position: relative;
          padding: 0.04rem 0.08rem;
          border-radius: 0.04rem;
          color: var(--text-gray);
          background-color: var(--bgc-gray);
          border: 0.01rem solid var(--bgc-gray);
          margin-right: 0.1rem;
          margin-bottom: 0.1rem;
          &::after{
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: var(--bgc-white);
            animation: catWidth .3s linear forwards;
            @keyframes catWidth {
              0%{
                width: 100%;
              }100%{
                width: 0;
              }
            }
          }
        }
        .hot {
          border: 0.01rem solid var(--text-red);
          color: var(--text-red);
          background-color: var(--bgc-white);
        }
      }
      .items {
        width: 100%;
        margin-top: 0.1rem;
        overflow-x: scroll;
        display: flex;
        justify-content: space-between;
        .item {
          width: 1.05rem;
          min-width: 1.05rem;
          border-radius: 0.05rem;
          overflow: hidden;
          .img-box {
            position: relative;
            width: 1.05rem;
            height: 1.05rem;
            .item-tag {
              position: absolute;
              left: 0;
              top: 0;
              font-size: 0.12rem;
              color: var(--text-black);
              background-color: var(--bgc-yellow2);
              padding: 0.02rem 0.04rem;
              border-radius: 0.02rem;
            }
          }
          .title {
            font-size: 0.13rem;
            margin-top: 0.06rem;
            color: var(--text-black);
            -webkit-line-clamp: 2;
          }
        }
      }
    }
  }
}
</style>